<template>
  <view class="feedback-container">
    <u-form labelPosition="top"  labelWidth="120" :model="form" ref="uForm" :rules="rules">
      <view class="card">
        <u-form-item label="申诉类型" prop="type" required>
          <u-radio-group v-model="form.type" placement="column">
            <u-radio 
              v-for="(item, idx) in typeList"
              :key="idx"
              :name="item.value"
              :label="item.label"
              active-color="#0030a7"
            />
          </u-radio-group>
        </u-form-item>
        
        <u-form-item label="详细说明" prop="desc" required>
          <u-textarea
            v-model="form.desc"
            placeholder="请输入您要申诉的内容，500字以内"
            maxlength="500"
           
            count
          />
        </u-form-item>
      </view>
      
      <view class="tip">
        若遇到投票错投、房屋绑定误绑等问题，建议您直接联系投票发起方进行处理 。
      </view>
      <view class="submit-btn-container app-bottom-paddig" :style="{ paddingBottom: safeAreaInsetsBottom==0? '32rpx !important':'' }">
        <view :class="computedClass" class="ok-button u-p-t-20 u-p-b-20" @click="handleSubmit">提交</view>
      <!-- <u-button
        type="primary"
        :disabled="!form.type || !form.desc"
        @click="handleSubmit"
        class="submit-btn"
      >
        提交
      </u-button> -->
      </view>
    </u-form>
  </view>
</template>

<script>
import { addFeedback } from '@/api/index'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      form: {
        type: '',
        desc: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择申诉类型', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请输入详细说明', trigger: 'blur' },
          { min: 1, max: 500, message: '详细说明长度在1-500个字符之间', trigger: 'blur' }
        ]
      },
      typeList: [
        { label: '投票问题', value: '1' },
        { label: '软件使用问题', value: '2' },
        { label: '其他问题', value: '9' }
      ]
    }
  },
  computed: {
    ...mapState('app',['user','safeAreaInsetsBottom']),
    computedClass(){
      return this.form.type&&this.form.desc?'':'disabled-button'
    }
  },
  methods: {
    handleSubmit() {
    
      this.$refs.uForm.validate().then(valid => {
        if (valid) {
          addFeedback({
             pmsFeedbackContent:this.form.desc,
            pmsFeedbackType:Number(this.form.type),
            createrId:this.user.wxUser.wxUserId,
            createrName:this.user.wxUser.nickName,


          }).then(res=>{
            if(res.code==200){
              uni.showToast({ title: '提交成功', icon: 'success' });
              setTimeout(()=>{
                uni.navigateBack()
              },1000)
            }
          })
         
        }
      }).catch(errors => {
    
      });
    }
  }
}
</script>

<style scoped lang="scss">
.feedback-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafd 0%, #F8FAFD 100%);
  padding: 0 20rpx 120rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  margin-top: 40rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
/* 自定义u-form-item样式 */
:deep(.u-form-item) {
  margin-bottom: 24rpx;
}

:deep(.u-form-item__body) {
  padding: 0;
}

:deep(.u-form-item__body__left) {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
}

:deep(.u-radio-group) {
  margin-top: 16rpx;
}

:deep(.u-radio) {
  margin-bottom: 24rpx;
  padding: 8rpx 0;
}

:deep(.u-radio__label) {
  font-size: 28rpx;
  color: #333;
}

:deep(.u-textarea) {
  background: #f5f7fa;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  min-height: 160rpx;
}
.tip {
  color: $uni-color-primary;
  font-size: 24rpx;
  margin: 32rpx 0 0 0;
  width: 100%;
  text-align: left;
}
.submit-btn {
  width: 100%;
  height: 88rpx;
  margin: 48rpx 0 0 0;
  background: $uni-color-primary !important;
  border-radius: 12rpx !important;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);

}

// :deep(.submit-btn .u-button__text) {
//   font-size: 32rpx;
//   color: #fff;
// }
</style>
<style  lang="scss">
.feedback-container{
  .u-radio{
    margin-bottom: 24rpx;
  }
  .submit-btn-container{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background: #fff;
    box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.1);
    z-index: 999;
  }
  .u-button--primary{
    background: $uni-color-primary !important;
    border: none !important;
  }
  }
</style>
